<script setup>
import { ref, inject, computed } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import { setValue, removeHTMLTags } from '@/common/utils'
import { SHARE_TABS } from '@/common/constant'
import { useSearchStore } from '@/stores/search'
import { usePlaylistStore } from '@/stores/playlist'
import { usePlayerStore } from '@/stores/player'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

// 获取 usePlaylistStore 数据和方法
const searchStore = useSearchStore()
// 获取 usePlaylistStore 数据和方法
const playlistStore = usePlaylistStore()
// 获取播放器数据和方法
const playerStore = usePlayerStore()

// 获取父组件传递过来数据和方法
const { handleScroll } = inject('common', null)
// 搜索值
const keywordVal = ref('')
// 歌曲、歌单切换索引
const tabsCurrent = ref(SHARE_TABS.currentIndex)
// 选项分类
const shareTabs = computed(() => SHARE_TABS.categorize)

// 显示搜索框右侧搜索按钮
const showAction = computed(() => {
  let status = true
  // #ifndef APP || H5
  status = false
  // #endif
  return status
})

// 导航栏高度
const navHeight = computed(() => {
  // #ifdef APP || H5
  return 54
  // #endif
  return 44
})

// 切换分类
const changeTabs = (index) => {
  // 获取索引
  setValue({ target: tabsCurrent, value: index })
  // 获取歌单数据
  if (
    keywordVal.value &&
    index === 1 &&
    searchStore.searchList.playlist.length <= 0
  ) {
    searchStore.setSearch(keywordVal.value, searchStore.pageNum, index)
  }
}

// 输入值事件
const changeSearch = (value) => {
  // 没有值就清空搜索列表数据
  if (!value) handleClearSearchInfo()
  else if (!searchStore.loading) {
    // #ifdef H5
    searchStore.setSearchSuggest(value)
    // #endif
  }
}

// 清空搜索数据
const handleClearSearchInfo = () => {
  searchStore.clearSearchInfo()
  // 设置分类索引
  setValue({ target: tabsCurrent, value: 0 })
}

// 执行搜索事件
const handleSearch = (value) => {
  // 传参就赋值
  if (value) keywordVal.value = value
  // 有搜索值就执行
  if (keywordVal.value && searchStore.loadStatus === 'loadmore')
    searchStore.setSearch(keywordVal.value)
}

// 滚动到底部
const handleScrollTolower = () => {
  searchStore.setScrollTolower(keywordVal.value)
}

// 清空搜索历史
const handleClearHistory = () => {
  searchStore.clearHistory()
}

/**
 * 点击歌曲播放
 * @param song
 */
const changeSong = (song) => {
  // 去除标签
  song.name = removeHTMLTags(song.name)
  song.artist = removeHTMLTags(song.artist)
  // 显示小播放器
  playerStore.setPlayerStatus({ smallPlayer: true })
  playerStore.setPlayerInfo(song)
}

/**
 * 添加歌曲到播放队列
 * @param song
 */
const changeAddQueue = (song) => {
  // 去除标签
  song.name = removeHTMLTags(song.name)
  song.artist = removeHTMLTags(song.artist)
  // 添加队列
  playerStore.setAddSongQueue(song)
}

/**
 * 跳转到歌单详情
 * @param playlist 歌单信息
 */
const changePlaylistItem = (playlist) => {
  // 去除标签
  playlist.name = removeHTMLTags(playlist.name)
  playlistStore.setSongListByPlaylistId(playlist)
}

/**
 * 收藏歌单
 * @param playlist 歌单信息
 */
const changePlaylistLike = (playlist) => {
  // 去除标签
  playlist.name = removeHTMLTags(playlist.name)
  // 收藏
  playerStore.setLikePlaylist(playlist)
}

onUnload(() => searchStore.clearSearchInfo())
</script>

<template>
  <ty-page
    :loading="searchStore.loading"
    :player-store="playerStore"
    :nav-height="navHeight"
    icon-back-color="#666"
  >
    <template #nav>
      <u-search
        v-model="keywordVal"
        shape="square"
        bg-color="#ffffff"
        color="#303133"
        search-icon-color="#909399"
        placeholder="搜索歌曲及歌手"
        :show-action="showAction"
        :action-style="{ color: '#465cff' }"
        focus
        @change="changeSearch"
        @custom="handleSearch"
        @search="handleSearch"
      ></u-search>
    </template>
    <!-- 没有搜索显示 -->
    <template v-if="searchStore.searchList.songlist.length <= 0">
      <view
        class="search-suggest"
        :class="{ show: searchStore.searchSuggest.length > 0 }"
      >
        <view
          class="search-suggest-item u-line-1"
          v-for="(item, index) in searchStore.searchSuggest"
          :key="index"
          @click="handleSearch(item)"
        >
          <u-icon name="search"></u-icon>
          <text class="name">{{ item }}</text>
        </view>
      </view>
      <template
        v-for="(card, index) in searchStore.searchHistoryAtHot"
        :key="index"
      >
        <view
          class="search-card"
          v-if="card.list.length > 0"
        >
          <u-section
            :title="card.name"
            sub-title="清空"
            line-color="#465cff"
            color="#303133"
            :right="index === 0"
            :arrow="false"
            @click="handleClearHistory"
          ></u-section>
          <view class="search-card-list">
            <view
              class="search-card-list--item"
              v-for="item in card.list"
              :key="item"
              @click="handleSearch(item)"
              >{{ item }}</view
            >
          </view>
        </view>
      </template>
    </template>
    <!-- 搜索-列表内容 -->
    <view
      class="share-content"
      v-else
    >
      <view class="share-tabs">
        <u-tabs
          :list="shareTabs"
          :is-scroll="false"
          bg-color="transparent"
          gutter="20"
          v-model="tabsCurrent"
          @change="changeTabs"
        ></u-tabs>
      </view>
      <view class="share-list">
        <swiper
          class="share-list--swiper"
          :current="tabsCurrent"
        >
          <swiper-item>
            <ty-song-list
              :list="searchStore.searchList.songlist"
              :load-status="searchStore.loadStatus"
              :player-info="playerStore.playerInfo"
              item-bg-color="initial"
              serial-number
              is-add
              @click="changeSong"
              @add-queue="changeAddQueue"
              @scroll="handleScroll"
              @scroll-tolower="handleScrollTolower"
            ></ty-song-list>
          </swiper-item>
          <swiper-item>
            <ty-song-list
              :list="searchStore.searchList.playlist"
              load-status="nomore"
              item-bg-color="initial"
              serial-number
              is-like
              @scroll="handleScroll"
              @like="changePlaylistLike"
              @click="changePlaylistItem"
            ></ty-song-list>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </ty-page>
</template>

<style lang="scss" scoped>
.search-suggest {
  background-color: $uni-bg-color-grey;
  padding: $ty-md-padding 110rpx;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  min-height: 215rpx;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateY(-100%);
  opacity: 1;
  &.show {
    transform: translateY(0);
    opacity: 1;
  }
  &-item {
    color: $u-content-color;
    font-size: 30rpx;
    padding: $ty-md-padding 0;
    .name {
      margin-left: $ty-lg-padding;
    }
  }
}

.search-card {
  background-color: $u-bg-color-inverse;
  border-radius: $ty-border-radius;
  margin: $ty-lg-padding $ty-lg-padding;
  padding: $ty-lg-padding;
  .search-card-list {
    @include ty-flex-row;
    @include ty-flex-wrap;
    @include ty-row-left;
    margin: calc($ty-xxlg-padding - $ty-lg-padding) 0
      calc($ty-xxlg-padding - $ty-lg-padding) calc(0px - $ty-lg-padding);
    &--item {
      background-color: $u-type-info-light;
      border-radius: $ty-border-radius-lg;
      font-size: 28rpx;
      color: $u-content-color;
      text-align: center;
      padding: $ty-sm-padding;
      flex: 0 1 calc(25% - $ty-lg-padding);
      margin: $ty-lg-padding 0 0 $ty-lg-padding;
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
